<template>
  <div class="app-container">
    <div class="handle-content">
      <el-input v-model="listQuery.name" placeholder="请输入负责人名字" style="width: 300px;">
        <el-button slot="append" @click="search">查询</el-button>
      </el-input>
      <span class="right">
        <el-button type="primary" @click="add">
          添加店铺
        </el-button>
      </span>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" :row-class-name="parentStyle" border fit highlight-current-row>
      <el-table-column label="店铺ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="联系方式" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="会员等级" align="center">
        <template slot-scope="scope">
          <el-tag class="pointer" :type="scope.row.grade_type === 0 ? 'danger' : 'success'" @click="grade(scope.row.id, scope.row.title)">{{ scope.row.grade_data }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="分享经济" align="center">
        <template slot-scope="scope">
          <el-tag class="pointer" :type="scope.row.share_type === 0 ? 'danger' : 'success'" @click="share(scope.row.id, scope.row.title)">{{ scope.row.share_data }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="团队奖励" align="center">
        <template slot-scope="scope">
          <el-tag class="pointer" :type="scope.row.award_type === 0 ? 'danger' : 'success'" @click="award(scope.row.id, scope.row.title)">{{ scope.row.award_data }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="支付配置" align="center">
        <template slot-scope="scope">
          <el-tag class="pointer" :type="scope.row.pay_type === 0 ? 'danger' : 'success'" @click="pay(scope.row.id, scope.row.title)">{{ scope.row.pay_data }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="积分配置" align="center">
        <template slot-scope="scope">
          <el-tag class="pointer" :type="scope.row.jf_type === 0 ? 'danger' : 'success'" @click="jf(scope.row.id, scope.row.title)">{{ scope.row.jf_data }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="250">
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.status" @change="changeRadio($event, scope.row.id)">
            <el-radio :label="1">上线</el-radio>
            <el-radio :label="2">下线</el-radio>
            <el-radio :label="3">冻结</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <el-button title="编辑" type="primary" circle icon="el-icon-edit" @click="edit(scope.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <dialog-model ref="dialog" @sure="updateStatus" />
    <store-handle ref="storeHandle" @afterSave="afterSave" />
    <grade-handle ref="gradeHandle" @afterSave="afterSave" />
    <share-handle ref="shareHandle" @afterSave="afterSave" />
    <award-handle ref="awardHandle" @afterSave="afterSave" />
    <pay-handle ref="payHandle" @afterSave="afterSave" />
    <jf-handle ref="jfHandle" @afterSave="afterSave" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import DialogModel from '@/components/Dialog'
import StoreHandle from './component/handle'
import GradeHandle from './component/gradeHandle'
import ShareHandle from './component/shareHandle'
import AwardHandle from './component/awardHandle'
import PayHandle from './component/payHandle'
import JfHandle from './component/jfHandle'
import { Message } from 'element-ui'
import { getList, updateStatus } from '@/api/store'
export default {

  components: { Pagination, DialogModel, StoreHandle, GradeHandle, ShareHandle, AwardHandle, PayHandle, JfHandle },

  data() {
    return {
      // 数据
      list: [],
      // 添加/编辑店铺是否显示
      listLoading: false,
      // 分页数据
      listQuery: {
        page: 1,
        pageSize: 10,
        // 负责人名字查询框
        name: ''
      },
      // 总数据数目
      total: 0,
      // 店铺ID
      handleId: 0,
      // 选择的店铺状态
      statusId: 0
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    parentStyle({ row, rowIndex }) {
      if (row.pid === 0) {
        return 'success-row'
      }
      return 'warning-row'
    },

    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        var arr = response.data.data
        var info = []
        for (const index in arr) {
          info.push(arr[index])
        }
        this.list = info
        this.total = response.data.total
        this.listLoading = false
      })
    },

    // 弹窗时间
    changeRadio(e, id) {
      this.handleId = id
      this.statusId = e
      this.$refs.dialog.showDialog('[ ' + e + ' ] 您确认要修改店铺状态吗?')
    },

    search() {
      this.getList()
    },

    add() {
      this.$refs.storeHandle.add()
    },

    grade(id, title) {
      this.$refs.gradeHandle.ini(id, title)
    },

    share(id, title) {
      this.$refs.shareHandle.ini(id, title)
    },

    award(id, title) {
      this.$refs.awardHandle.ini(id, title)
    },

    pay(id, title) {
      this.$refs.payHandle.ini(id, title)
    },

    jf(id, title) {
      var item = this.list.filter(res => {
        if (res.id === id) {
          return res
        }
      })
      this.$refs.jfHandle.ini(item[0])
    },
    edit(id, title) {
      var item = this.list.filter(res => {
        if (res.id === id) {
          return res
        }
      })
      this.$refs.storeHandle.edit(item[0])
    },

    afterSave() {
      this.getList()
    },

    // 确认事件
    updateStatus() {
      updateStatus({ id: this.handleId, status: this.statusId }).then(res => {
        const type = res.code === 20002 ? 'error' : 'success'
        Message({
          message: res.data.info,
          type,
          duration: 2000
        })
        this.getList()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
    .handle-content{
        margin-bottom: 20px;
        .right{
            float: right;
        }
    }
}
</style>
<style>
.pointer{
  cursor:pointer;
}
.el-table .warning-row {
}

.el-table .success-row {
}
</style>
